<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-08-12 11:53:32
 * @LastEditors: Silence
 * @LastEditTime: 2023-08-15 16:11:36
-->
<template>
  <div class="goodsclass-mainCom">
    <goodsclassInput @sousuo="sousuo($event)" />
    <div class="goodsclass-btn">
      <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium" class="custom-button" @click="goodsAdd">新建</el-button>
    </div>
    <!-- 表格 -->
    <div class="goodsclass-main">
      <el-table
        :header-cell-style="{background:'#f3f6fb'}"
        class="customer-table"
        :data="tableData"
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column
          prop="classId"
          label="序号"
          width="80"
        />
        <el-table-column
          prop="className"
          label="商品类型名称"
        />
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="medium" @click="handleClick(row)">修改</el-button>
            <el-button type="text" size="medium" @click="delClick(row.classId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗 -->

    <el-dialog title="新增工单" :visible.sync="goodsAddDialog" width="630px" :center="true" :close="handleClose">
      <el-form ref="ruleForm">
        <el-form-item label="设备编号:" prop="name1">
          <el-input
            v-model="form.className"
            autocomplete="off"
            maxlength="10"
            placeholder="请输入"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" class="custom-button2" type="primary" @click="close">取消</el-button>
        <el-button type="primary" size="medium" class="custom-button" @click="addGoodsClass">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import goodsclassInput from './components/goodsclassInput.vue'
import { goodsClassApi, addGoodsClassApi, updateGoodsClassApi, delGoodsClassApi } from '../../api/goodsclass'
export default {
  name: 'Goodsclass',
  components: {
    goodsclassInput
  },
  data() {
    return {
      tableData: [],
      total: '',
      num: 1,
      goodsAddDialog: false,
      form: {
        className: ''
      }
    }
  },
  created() {
    this.goodsClassApiList()
  },
  methods: {
    close() {
      this.handleClose()
    },
    goodsAdd() {
      this.goodsAddDialog = true
    },
    async goodsClassApiList(obj) {
      let res
      if (obj) {
        res = await goodsClassApi({ className: obj })
      } else {
        res = await goodsClassApi()
      }
      console.log(res.data, 999999)
      this.tableData = res.data.currentPageRecords
      this.total = res.data.totalCount
    },
    // 收索请求
    sousuo(e) {
      console.log(e)
      this.goodsClassApiList(e)
    },
    // 添加商品类型
    async addGoodsClass() {
      if (this.form.classId) {
        await updateGoodsClassApi(this.form)
      } else {
        await addGoodsClassApi(this.form)
      }
      this.goodsClassApiList()
      this.handleClose()
    },
    handleClose() {
      this.form = this.$options.data().form
      this.goodsAddDialog = false
    },
    // 修改表单
    handleClick(e) {
      console.log(e)
      this.form = e
      this.goodsAddDialog = true
    },
    // 删除数据
    async delClick(e) {
      console.log(e)
      await delGoodsClassApi(e)
      this.goodsClassApiList()
    }
  }
}
</script>
<style lang='scss'  scoped>
.goodsclass-mainCom{
  .goodsclass-btn{
    margin-top: 17px;
    margin-bottom: 20px;
 .custom-button {
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    }
   .custom-button:hover{
 background: linear-gradient(135deg,#ff7d43,#db3602)!important;
    }
  }
   .goodsclass-main{
  width: 100%;
  .el-table td, .el-table th.is-leaf{
    border-bottom: 0px solid #EBEEF5;
  }
  .el-button+.el-button{
    color: red;
  }
}
  .el-dialog{
    border-radius: 10px;
    padding: 20px;
    .el-input{
      width: 78%;
    }
    .el-input-number{
      width: 396px;
    }
       .custom-button {
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    }
   .custom-button:hover{
 background: linear-gradient(135deg,#ff7d43,#db3602)!important;
    }
    .custom-button2{
      color: #655b56;
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background-color: #fbf4f0;
    }
    .custom-button2:hover{
    background-color: #f3e7e1;
    }
  }
}

</style>
